<template>
    <a-space>
        网站组
        <a-select
            :options="websiteGroupOptions"
            v-model:value="websiteGroupId"
            show-search
            :filter-option="filterOption"
            style="width: 140px"
        ></a-select>
        负责人
        <a-select
            :options="userOptions"
            show-search
            :filter-option="filterOption"
            style="width: 100px"
            v-model:value="createId"
        ></a-select>
        行业类型
        <a-select
            :options="websiteTypeOptions"
            v-model:value="tradeTypeId"
            show-search
            :filter-option="filterOption"
            style="width: 90px"
        ></a-select>
        伪原创类型
        <a-select
            :options="artWycOptions"
            v-model:value="artWyc"
            show-search
            :filter-option="filterOption"
            style="width: 120px"
        ></a-select>
        ES_HOST
        <a-select
            :options="esHostOptions"
            v-model:value="esHost"
            show-search
            :filter-option="filterOption"
            style="width: 130px"
        ></a-select>
        索引类型
        <a-select v-model:value="indexType" style="width: 90px" :options="indexTypeOptions"> </a-select>
        公共索引
        <a-select v-model:value="isCommon" style="width: 90px" :options="otherOptions"> </a-select>
        导入索引
        <a-select v-model:value="isOutside" style="width: 90px" :options="otherOptions"> </a-select>
    </a-space>
    <br />
    <a-space style="margin: 15px 0">
        <a-input placeholder="输入索引或备注..." v-model:value="searchValue" style="width: 200px"></a-input>
        <a-button type="primary" @click="searchFunc" :loading="searchLoading">
            <template #icon>
                <SearchOutlined />
            </template>
            搜索
        </a-button>
        <a-button type="dashed">
            <template #icon>
                <DownloadOutlined />
            </template>
            导出搜索结果
        </a-button>
        <a-button @click="openAddModal" type="primary"
            >新建索引
            <template #icon>
                <PlusCircleOutlined />
            </template>
        </a-button>
        <a-button @click="openExportModal" type="primary"
            >导入索引 <template #icon> <PlusCircleOutlined /> </template
        ></a-button>
    </a-space>
    <a-spin :style="spinStyle" :spinning="tableLoading">
        <a-table :columns="columns" :data-source="tableData" sticky bordered :pagination="false" size="small" class="table">
        </a-table>
        <br />
        <a-row justify="center" v-if="total > 10">
            <a-pagination
                v-model:current="page"
                v-model:pageSize="size"
                show-quick-jumper
                showSizeChanger
                :total="total"
                @change="pageChange"
                :show-total="(total:number) => `总计 ${total} 项`"
            />
        </a-row>
    </a-spin>
    <AddOrUpdateIndex
        :handle-type="handleType"
        :key="handleType"
        @reload="searchFunc"
        :data-info="dataInfo"
        v-model:visible="indexModalVisible"
        :website-group-options="websiteGroupOptions"
        :user-options="userOptions"
        :website-type-options="websiteTypeOptions"
        :art-wyc-options="artWycOptions"
    />
</template>

<script lang="ts" setup>
    import AddOrUpdateIndex from "@/components/AddOrUpdateIndex.vue";
    import { useCommonAsyncOptions, useCommonStaticOptions } from "@/hooks/useEsArticleCommon";
    import { useSpinLoadingState } from "@/hooks/useCommon";
    import indexTypeOptions from "@/assets/json/indexType.json";
    import { PlusCircleOutlined, DownloadOutlined, SearchOutlined } from "@ant-design/icons-vue";
    import { indexManagementApi } from "@/api/esArticle";
    import { message } from "ant-design-vue";
    import { useColumns } from "@/hooks/useIndexManagement";
    const { spinStyle, viewLoading: tableLoading } = useSpinLoadingState();
    const { userOptions, websiteGroupOptions, websiteTypeOptions, artWycOptions } = useCommonAsyncOptions("get");
    const { filterOption, esHostOptions, targetKeywordOptions: otherOptions } = useCommonStaticOptions();
    esHostOptions.unshift({ label: "请选择", value: "" });
    indexTypeOptions.unshift({ label: "请选择", value: "" });
    otherOptions.unshift({ label: "请选择", value: -1 });
    const { columns, isReload, indexModalVisible, handleType, dataInfo } = useColumns(
        userOptions,
        websiteGroupOptions,
        websiteTypeOptions,
        artWycOptions,
        indexTypeOptions
    );
    const searchLoading = ref(false);
    const searchValue = ref("");
    // 负责人
    const createId = ref(0);
    // 负责组长
    const websiteGroupId = ref(0);
    // 行业类型
    const tradeTypeId = ref(0);
    // 伪原创类型
    const artWyc = ref("");
    // Es服务器
    const esHost = ref("");
    // 索引类型
    const indexType = ref("");
    // 是否为公共索引
    const isOutside = ref<-1 | 0 | 1>(-1);
    // 是否为导入索引
    const isCommon = ref<-1 | 0 | 1>(-1);
    // // 当前操作的索引信息
    // const dataInfo = ref<Partial<IndexManagementItem>>({});
    // indexModal显示和隐藏
    // const indexModalVisible = ref(false);
    // 1 添加 2 导入 3 修改
    // const handleType = ref<1 | 2 | 3>(1);
    const openAddModal = () => {
        handleType.value = 1;
        indexModalVisible.value = true;
    };
    // 导入
    const openExportModal = () => {
        handleType.value = 2;
        indexModalVisible.value = true;
    };
    const tableData = ref<Array<IndexManagementItem>>([]);
    const total = ref(0);
    // 当前页变化
    const pageChange = (pageNumber: number) => {
        page.value = pageNumber;
        searchFunc();
    };
    // 分页
    const size = ref(10);
    const page = ref(1);
    const searchFunc = () => {
        tableLoading.value = true;
        const params: IndexManagementGetParmas = {
            size: size.value,
            page: page.value,
            search: searchValue.value,
            es_host: esHost.value,
            index_type: indexType.value,
            wyc_type: artWyc.value
        };
        if (isCommon.value != -1) {
            params.is_common = isCommon.value;
        }
        if (isOutside.value != -1) {
            params.is_outside = isOutside.value;
        }
        const obj = { create_id: createId, website_group_id: websiteGroupId, trade_type_id: tradeTypeId };
        for (const key in obj) {
            // @ts-ignore
            if (obj[key].value != 0) {
                // @ts-ignore
                params[key] = obj[key].value;
            }
        }
        indexManagementApi(params, "get")
            .then((res) => {
                if (res.data.code === 200) {
                    tableData.value = res.data.data;
                    total.value = res.data.total;
                } else {
                    message.error("加载失败！");
                }
            })
            .catch((e) => {
                message.error("加载失败！");
            })
            .finally(() => {
                tableLoading.value = false;
                isReload.value = false;
            });
    };
    watch(isReload, (v) => {
        v && searchFunc();
    });
    onMounted(() => {
        searchFunc();
    });
</script>

<style scoped lang="scss"></style>
